<template>
  <div style="padding:20px">
    <!-- 查询条件表单：收集查询条件 -->
    <el-form :inline="true" :model="queryObj" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="queryObj.name" placeholder="讲师姓名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryObj.level" placeholder="头衔">
          <el-option label="高级讲师" value="1"/>
          <el-option label="首席讲师" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="入驻时间">
        <el-date-picker
          v-model="queryObj.joinDateBegin"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"/>
        -
        <el-date-picker
          v-model="queryObj.joinDateEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
    </div>
    <el-table :data="teachers" stripe @selection-change="handleSelectionChange" >
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        label="序号"
        type="index"
        width="50"/>
      <el-table-column prop="name" label="姓名" width="100"/>
      <el-table-column
        label="头像"
        prop="avatar"
        width="100">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:80px;height:80px">
          <img v-else src="https://sh210225-gulionline.oss-cn-shanghai.aliyuncs.com/avatar/2021/06-29/1624929510122_12fe0d78.jpg" style="width:80px;height:80px">
        </template>

      </el-table-column>
      <el-table-column prop="intro" label="简介" width="300"/>
      <el-table-column prop="sort" label="排序" width="50"/>
      <el-table-column prop="level" label="头衔" >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.level === 1 ? 'primary' : 'success'"
            disable-transitions>{{ scope.row.level===1?'高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="joinDate" label="加入日期" />

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页导航条 -->
    <div style="text-align:center;margin-top:50px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[3, 5, 7, 10,20]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
export default { // 在它内部写代码相当于在vue对象中编写内容
  data() {
    return {
      queryObj: {}, // 收集查询条件的对象
      teachers: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      selection: []
    }
  },
  created() {
    // this.getTeachers()
    this.getTeacherPage()
  },
  methods: {
    handleBatchDel() {
      // 1、获取选中的行的数据的id集合
      // console.log('批量删除：', this.selection)
      if (this.selection.length === 0) { // 没有选中行
        this.$message.warning('请选择要删除的讲师')
        return
      }
      const arr = []
      // 获取id集合
      this.selection.forEach(item => { // 增强for遍历时 会自动使用每个元素调用一次该访问     item代表正在遍历的元素
        arr.push(item.id)
      })

      console.log(arr)

      // 2、 提交批量删除的请求
      teacherApi.batchDel(arr).then(r => {
        this.$message.success('批量删除成功')
        this.getTeacherPage()
      })
    },
    handleSelectionChange(selection) {
      // console.log(selection)
      // selection代表目前选中的行 的json对象的集合
      this.selection = selection
    },
    clear() { // 清空单击事件
      // 清空条件
      // 设置页面为1 执行查询
      this.queryObj = {}
      this.pageNum = 1
      this.getTeacherPage()
    },
    search() { // 带条件分页查询按钮
      this.pageNum = 1
      this.getTeacherPage()
    },
    handleSizeChange(val) { // 当pageSize的值改变时回调  val代表改变后的pageSize的值
      // console.log(`每页 ${val} 条`)
      // 重新使用最新的pageSize和当前的pageNum查询数据显示
      this.pageSize = val
      this.pageNum = 1
      this.getTeacherPage()
    },
    handleCurrentChange(val) { // 当pageNum的值改变时回调
      // console.log(`当前页: ${val}`)
      this.pageNum = val
      this.pageSize = 3
      this.getTeacherPage()
    },
    // 查询讲师分页数据
    getTeacherPage() {
      teacherApi.getTeacherPage(this.pageNum, this.pageSize, this.queryObj).then(r => {
        console.log(r.data.page)
        this.teachers = r.data.page.records // 获取分页对象的数据集合
        this.total = r.data.page.total
      })
    },

    handleEdit(index, teacher) {
      // console.log('编辑 ', teacher)
      // teacher.id
      // 将讲师id传给 form.vue  然后在form.vue页面中请求获取id对应的讲师数据回显到form.vue页面
      // this.$router.push('/teacher/edit?id=' + teacher.id)
      this.$router.push(`/teacher/edit/${teacher.id}`)
    },
    handleDelete(index, teacher) {
      this.$confirm(`此操作将永久删除【${teacher.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除
        // 判断 当前页面中删除的记录是不是最后一条记录，如果是，删除成功后 需要访问当前页面的上一页记录
        // console.log('删除 ', teacher.id)
        teacherApi.deleteTeacher(teacher.id).then(r => {
          // 删除成功：  r的状态码为20000时才会被放行
          this.$message.success(`删除【${teacher.name}】成功`)
          if (this.teachers.length === 1) {
            this.pageNum = this.pageNum - 1
          }
          // 刷新当前页面
          // this.getTeachers()
          this.getTeacherPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询讲师列表的方法
    getTeachers() {
      teacherApi.getTeachers().then(r => { // r 代表 响应报文的响应体对象  也就是 响应对象R
        console.log(r)
        this.teachers = r.data.items
      })
    }
  }
}
</script>

